<template>
    <view class="module-detail">
        <view class="card-container">
            <!-- 遍历 moduleList 数组，为每个数据项生成一个卡片 -->
            <view v-for="(item, index) in moduleList" :key="item.id" class="card-item">
                <view class="card">
                    <!-- 显示标题 -->
                    <u--text color="black" size="25" :text="item.title"></u--text>
                    <!-- 添加间隔 -->
                    <view style="margin-top: 10px;"></view>
                    <!-- 显示描述，限制为一行 -->
                    <u--text :lines="1" size="20" :text="item.description"></u--text>
                    <!-- 添加间隔 -->
                    <view style="margin-top: 10px;"></view>
                    <!-- 显示图片轮播 -->
                    <u-swiper :list="item.images" height="200px"></u-swiper>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// 导入模块数据
import { moduleData } from '@/pages/data/moduleData.js';
export default {
    data() {
        return {
            moduleList: [] // 当前模块的数据列表
        };
    },
    onLoad(options) {
        const type = options.type; // 获取模块类型
        this.moduleList = moduleData[type]; // 根据类型加载数据
    }
};
</script>

<style scoped>
.module-detail {
    padding: 20px;
}

.card-container {
    display: flex;
    flex-direction: column; /* 垂直排列卡片 */
    align-items: center; /* 水平居中对齐卡片 */
}

.card-item {
    width:100vw; /* 卡片宽度占父容器的 90% */
    max-width: 600px; /* 最大宽度为 600px */
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 20px; /* 卡片之间的底部间距 */
}

.card {
    background-color: #ffffff;
    border-radius: 12px; /* 增大圆角半径 */
    padding: 25px;
    transition: all 0.3s ease;
    position: relative; /* 为卡片内的元素定位做准备 */
}



/* 标题样式 */
.card u--text[size="25"] {
    font-weight: 600; /* 标题加粗 */
    color: #333333; /* 标题颜色 */
    text-align: center; /* 标题居中 */
}

/* 描述样式 */
.card u--text[size="20"] {
    color: #666666; /* 描述颜色 */
    text-align: center; /* 描述居中 */
}

/* 图片轮播样式 */
.card u-swiper {
    border-radius: 8px; /* 图片轮播的圆角 */
    overflow: hidden; /* 隐藏溢出的内容 */
}
</style>